<template>
  <div id="recommendation">
    <el-row type="flex" justify="center">
      <el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
        <div class="hm-banner">
          <el-carousel :interval="3000" type="card" height="200px">
            <el-carousel-item v-for="(item, index) in banner" :key="index">
              <!-- <h3 class="medium">{{ item.pic }}</h3> -->
              <div class="banner-images">
                <img v-lazy="item.pic" alt="" />
                <div class="tag" :style="{ backgroundColor: item.titleColor }">
                  {{ item.typeTitle }}
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <p class="hm-title">推荐歌单<i class="el-icon-arrow-right"></i></p>
        <ul class="recommend-song">
          <li
            v-for="(item, index) in boutiquePlaylists"
            :key="index"
            v-if="index < 10"
            @click="skip(item)"
          >
            <div class="images">
              <img v-lazy="item.coverImgUrl" alt="" />
              <div class="play-icon">
                <img src="../ranklist/images/play.png" alt="" />
              </div>
            </div>
            <p class="name">{{ item.name }}</p>
          </li>
        </ul>
        <p class="hm-title">独家放送<i class="el-icon-arrow-right"></i></p>
        <ul class="privatecontent">
          <li v-for="(item, index) in privatecontent" :key="index" @click="skipMv(item)">
            <div class="images"><img v-lazy="item.picUrl" alt="" /></div>
            <p class="private-title">{{ item.copywriter }}</p>
          </li>
        </ul>
        <p class="hm-title">最新音乐<i class="el-icon-arrow-right"></i></p>
        <ul class="newsong">
          <li v-for="(item, index) in newsong" :key="index" @click=" play(item)">
            <div class="images">
              <img v-lazy="item.picUrl" alt="" />
              <div class="icons">
                <img src="../ranklist/images/play.png" alt="" />
              </div>
            </div>
            <div class="desc">
              <p class="name">{{ item.name }}</p>
              <div class="author"><div class="mv">SQ</div><div class="mv" v-show="item.song.mvid>0">MV</div>{{ item.song.artists[0].name }}</div>
            </div>
          </li>
        </ul>
        <p class="hm-title">推荐MV<i class="el-icon-arrow-right"></i></p>
        <ul class="recommend-mv">
          <li v-for="(item, index) in recommendMV" :key="index" @click="skipMv(item)">
            <div class="images">
              <img v-lazy="item.picUrl" alt="">
              <p class="title-mv">{{item.copywriter}}</p>
              <div class="playcount"><Icon type="ios-play-outline" class="play-icon"/>{{item.playCount}}</div>
            </div>
            <p class="desc nowrap">{{item.name}}</p>
            <p class="author nowrap"><span v-for="(item, index) in item.artists" :key="index"><span v-if="index>0">/</span>{{item.name}}</span></p>
          </li>
        </ul>
        <p class="hm-title">主播电台<i class="el-icon-arrow-right"></i></p>
        <ul class="recommend-radio">
          <li v-for="(item, index) in recommendRadio" :key="index">
            <div class="images">
              <img v-lazy="item.picUrl" alt="">
              <p class="title nowrap">{{item.program.radio.name}}</p>
            </div>
            <p class="desc nowrap">{{item.name}}</p>
          </li>
        </ul>
         <!-- <p class="hm-title">听听<i class="el-icon-arrow-right"></i></p> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "recommendation",
  data() {
    return {
      banner: [],
      boutiquePlaylists: [],
      privatecontent: [],
      newsong: [],
      recommendMV:[],
      recommendRadio:[],
    };
  },
  created() {
    //首页-发现
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/homepage/block/page?timetamp=" +
        new Date().getTime(),
    }).then((res) => {
      console.log(res.data);
      this.banner = res.data.data.blocks[0].extInfo.banners;
    });
    //精品歌单
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/top/playlist/highquality?timetamp=" +
        new Date().getTime(),
    }).then((res) => {
      this.boutiquePlaylists = res.data.playlists;
      console.log(res.data.playlists);
    });
    //独家放送
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/personalized/newsong?timetamp=" +
        new Date().getTime(),
      params: {
        limit: 12,
      },
    }).then((res) => {
      this.newsong = res.data.result;
      console.log("新音乐", res.data);
    });
    //推荐新音乐
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/personalized/privatecontent?timetamp=" +
        new Date().getTime(),
    }).then((res) => {
      this.privatecontent = res.data.result;
      console.log("独家放送", res.data);
    });
    //推荐mv
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/personalized/mv?timetamp=" +
        new Date().getTime(),
    }).then((res) => {
      this.recommendMV = res.data.result
      console.log("推荐mv", res.data.result);
    });
    //推荐电台
     this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/personalized/djprogram?timetamp=" +
        new Date().getTime(),
    }).then((res) => {
      this.recommendRadio = res.data.result
      console.log("推荐电台", res.data.result);
    });
    // //推荐节目
    //  this.axios({
    //   method: "get",
    //   withCredentials: true,
    //   url:
    //     "https://music.hzbiz.net/dj/program/toplist?timetamp=" +
    //     new Date().getTime(),
    // }).then((res) => {
    //   // this.recommendRadio = res.data.result
    //   console.log("推荐节目", res.data);
    // });
  },
  methods: {
    //跳转mv
    skipMv(item){
      this.$router.push({
        path:"/mv",
        query:{
          list:JSON.stringify(item)
        }
      })
    },
    //播放相关
    play(item) {
      document
        .getElementsByClassName("audio-play")[0]
        .classList.add("audio-stop");

      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/song/url?timetamp=" + new Date().getTime(),
        params: {
          id: item.id,
        },
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/song/detail?timetamp=" +
            new Date().getTime(),
          params: {
            ids: item.id,
          },
        }).then((res) => {
          console.log("歌曲详情", res.data);
          this.currentMusic = res.data.songs[0];
          this.$store.state.nowMusic = this.currentMusic;
          this.$store.state.playMusicList.push(this.currentMusic);
          //数组对象去重
          let obj = {};
          this.$store.state.playMusicList = this.$store.state.playMusicList.reduce(
            function (item, next) {
              obj[next.id] ? "" : (obj[next.id] = true && item.push(next));

              return item;
            },
            []
          );
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/lyric?timetamp=" + new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveLyric", res.data.lrc.lyric);
            console.log("歌词存储成功");
          });
          //评论获取
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/comment/music?timetamp=" +
              new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveComment", res.data);
            console.log("歌曲评论储存成功", this.$store.state.songcomment);
          });
          console.log("添加歌单成功", this.$store.state.playMusicList);
          console.log("仓库现在的音乐", this.$store.state.nowMusic);
        });
        // console.log(res.data);
        let aud = document.getElementsByTagName("audio")[0];
        aud.setAttribute("src", res.data.data[0].url);
        aud.play();
      });
    },

    skip(item) {
      this.$router.push({
        path: "/homepage/contents/rankdetail",
        query: {
          detail: item,
          id: item.id,
        },
      });
    },
  },
};
</script>

<style  scoped>
.hm-banner {
  margin-top: 20px;
}
.hm-banner .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.hm-banner .el-carousel__item {
  border-radius: 10px;
}
.hm-banner .el-carousel__item .banner-images {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.hm-banner .el-carousel__item .banner-images img {
  height: 100%;
  width: auto;
}
.hm-banner .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.hm-banner .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.hm-banner .tag {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #ffffff;
  padding: 5px;
  border-radius: 10px 0 10px 0;
}
p.hm-title {
  margin-top: 20px;
  font-weight: bold;
  font-size: 20px;
  color: #000;
  cursor: pointer;
  margin-bottom: 15px;
}
.recommend-song {
  display: grid;
  grid-template-rows: repeat(2, 247px);
  grid-template-columns: repeat(5, 186px);
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  margin-bottom: 25px;
}
.recommend-song li:hover {
  cursor: pointer;
}
.recommend-song li .images {
  width: 100%;
  height: 186px;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 10px;
  position: relative;
}
.recommend-song li > p.name:hover {
  color: #000;
}
.recommend-song .images .play-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  transition: all 0.6s;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.recommend-song .images:hover .play-icon {
  opacity: 1;
}
.recommend-song .images .play-icon img {
  width: 65%;
  margin-left: 5px;
}
.privatecontent {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}
.privatecontent li {
  width: 315px;
  cursor: pointer;
}
.privatecontent li .images {
  border-radius: 5px;
  overflow: hidden;
}
.privatecontent li .images img {
  width: 120%;
}
.privatecontent li .private-title {
  margin-top: 10px;
}
.privatecontent li .private-title:hover {
  color: #000;
}
.newsong {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 280px;
}
.newsong li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  width: 305px;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 5px;
}
.newsong li:hover {
  background-color: #f5f5f5;
}
.newsong .images {
  width: 51px;
  height: 51px;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
}
.newsong .desc {
  margin-left: 10px;
}
.newsong .desc .author{
  font-size: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 5px;
}
.newsong .desc .author .mv{
  width: 25px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid #ec4141;
  color: #ec4141;
  text-align: center;
  line-height: 13px;
  margin-right: 3px;
}
.newsong .images .icons {
  width: 25px;
  height: 25px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(50% - 12.5px);
  left: calc(50% - 12.5px);
}
.newsong .images .icons img {
  width: 65%;
  margin-left: 3px;
}
.recommend-mv{
  display: flex;
  justify-content: space-between;
}
.recommend-mv .images{
  height: 130px;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
}
.recommend-mv .images .title-mv{
  position: absolute;
  top: -27px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  padding: 5px;
  transition: all 0.6s;
}
.recommend-mv .images .playcount{
  position: absolute;
  right: 5px;
  top: 5px;
  color: #ffffff;
  display: flex;
  justify-content: center;
}
.recommend-mv .images .playcount .play-icon{
  margin-right: 3px;
  font-size: 16px;
}
.recommend-mv .images:hover .title-mv{
  top: 0;
  transition: all 0.6s;
}
.recommend-mv li{
 width: 235px;
 cursor: pointer;
}
.recommend-mv .desc{
  color: #000;
  margin: 10px 0 5px;
}
.recommend-mv .author{
  font-size: 12px;
}
.recommend-radio{
  display: flex;
  justify-content: space-between;
}
.recommend-radio li{
  width: 150px;
  cursor: pointer;
}
.recommend-radio li .images{
  height: 150px;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 15px;
  position: relative;
}
.recommend-radio li .images .title{
  width: 100%;
  position: absolute;
  bottom: 0;
  color: #ffffff;
  background-image: linear-gradient(to top,  rgba(0, 0, 0, 0.4) , transparent);
  padding: 5px;
}
</style>
<style>
.hm-banner .el-carousel__indicator button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.hm-banner .el-carousel__indicator.is-active button {
  background-color: #ec4141;
}
</style>